<template>
  <div @touchmove.prevent @touchmove.stop class="container box box-ac box-jc">
    <div class="content animated zoomIn">
      <div class="head box box-ac box-jc">
        提示
        <!-- <div class="timer">{{time}}S后自动关闭</div> -->
      </div>
      <div class="desc">
        <table border="1" style="border-bottom:0;font-weight:700" cellspacing="0">
          业务范围
        </table>
        <table border="1" cellspacing="0">
          <tbody>
            <tr>
              <td>通讯费</td>
              <td>车辆费</td>
              <td>交通费</td>
            </tr>
            <tr>
              <td>出差申请</td>
              <td>出差报销</td>
              <td>单据查询</td>
            </tr>
          </tbody>
        </table>
        <!-- <p>
          1、快速报销应用目前支持以下报销场景
        </p>
        <p class="small">
          1）通讯费和交通费、车辆费的纸质或电子发票报销
        </p>
        <p class="small">
          2）个人出差申请和差旅报销
        </p>
        <p>
          2、原个人中心查询功能已整合到快速报销应用
        </p> -->
      </div>
      <div @click="hideWelcome()" class="btn btn-submit box box-ac box-jc">我知道了({{time}})</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'printBill',
  data () {
    return {
      time: 10,
      timer: null
    }
  },
  mounted () {
    this.runTimer()
  },
  methods: {
    hideWelcome () {
      clearInterval(this.timer)
      this.$emit('hideWelcome')
    },
    runTimer () {
      this.timer = setInterval(() => {
        this.time--
        if (this.time === 0) {
          clearInterval(this.timer)
          this.hideWelcome()
        }
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/config';
@import '../assets/css/mixins';
// table,table tr th, table tr td, { border:1px solid #0094ff;line-height:.42rem;}
// tr{
//   border:1px solid #0094ff;
//   text-align: center;
//   width:100%;
// }
table { text-align: center; line-height: .66rem; border-collapse: collapse;width:100%}
.container{
  position: absolute;
  z-index: 88;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background-color:rgba(0,0,0,.5);
}
.content{
  width:6.1rem;
  // height:7.5rem;
  border-radius:.2rem;
  background-color:#FFF;
  overflow: hidden;
  font-size:.26rem;
  color:#666;
  padding-bottom:.4rem;
  .head{
    width:100%;
    height:1rem;
    background-color:$themeColor;
    color:#FFF;
    font-size:.36rem;
    position: relative;
    .timer{
      position:absolute;
      color:red;
      right:.2rem;
      top:.3rem;
      font-size:.32rem;
      line-height:.4rem;
    }
  }
  .desc{
    padding:.5rem .6rem;
  }
  p{
    font-size:.32rem;
    padding:.1rem 0;
    margin:0;
    line-height: .4rem;
    text-align: center;
    // &:nth-of-type(1){
    // }
    &.small{
      // text-indent: .3rem;
      // font-size:.3rem;
      padding:.05rem 0;
      // padding-left:.3rem;
    }
  }
  .btn-submit{
    width:4.7rem;
    height:.88rem;
    margin:0 auto;
    color:#FFF;
    border-radius:.1rem;
    font-size:.36rem;
    background-color:$themeColor;
  }
}
</style>
